<template>
	<view class="home">
		<view class="bg-ff radius-40 padding-30" style="box-shadow: 0rpx 16rpx 80rpx 0rpx rgba(176,181,185,0.25);">
			<image :src="image_url" mode="" class="detailimg"></image>
			<view class="text-32 text-bold margin-top-30">{{title}}</view>
			<view class="text-24 text-99 margin-top-15">{{summary}}</view>
		</view>
		<view class="bg-ff radius-40 padding-30 margin-top-40"
			style="box-shadow: 0rpx 16rpx 80rpx 0rpx rgba(176,181,185,0.25);">
			<view class="text-28">
				* 评分 {{rating}}分
			</view>
			<view class="flex align-center margin-top-15">
				<view class="text-28 margin-right-10">0分</view>
				<ty-text-rate :value="star" :index="index" @change="changeRate"></ty-text-rate>
				<view class="text-28 margin-left-10">5分</view>
			</view>
			<view class="flex align-center justify-between margin-top-30">
				<view class="text-28">评价感受（选填）</view>
				<view class="text-28">（{{feedback.length}}/200)</view>
			</view>
			<textarea placeholder="请填写你对游戏的评价/感受" v-model="feedback" maxlength="200"></textarea>
		</view>
		<view class="subbtn" @click="getPing">提交</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				star: 5,
				image_url: "",
				id: "",
				title: "",
				summary: "",
				rating: "",
				feedback: ""
			}
		},
		onLoad(options) {
			console.log(options)
			this.id = options.id
			this.image_url = decodeURIComponent(options.image_url)
			this.title = decodeURIComponent(options.title)
			this.summary = decodeURIComponent(options.summary)
			this.rating = options.rating
		},
		methods: {
			changeRate(e) {
				console.log(e)
				this.star = e.star
			},
			getPing() {
				this.rq.getData('game/game_rat', {
					experience_id: this.id,
					rating: this.star,
					feedback: this.feedback,
					shop_id: uni.getStorageSync('store_id'),
				}).then(res => {
					if (res.code == 1) {
						this.cn.alert('提交成功').then(res => {
							uni.navigateBack({
								delta: 1
							})
						})
					}
				})
			}
		}
	}
</script>

<style>
	.home {
		width: 100%;
		min-height: 100vh;
		background: #fff;
		padding: 40rpx 30rpx;
	}

	.detailimg {
		width: 100%;
		height: 332rpx;
		border-radius: 40rpx;
	}

	textarea {
		width: 100%;
		height: 238rpx;
		background: #F3F3F3;
		border-radius: 40rpx 40rpx 40rpx 40rpx;
		padding: 25rpx;
		font-size: 24rpx;
		margin-top: 20rpx
	}

	.subbtn {
		width: 100%;
		height: 88rpx;
		background: #101010;
		box-shadow: 0rpx 16rpx 80rpx 0rpx rgba(66, 66, 67, 0.25);
		border-radius: 200rpx 200rpx 200rpx 200rpx;
		font-weight: bold;
		font-size: 32rpx;
		color: #FFFFFF;
		line-height: 88rpx;
		text-align: center;
		margin-top: 100rpx;
	}
</style>